<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Electron窗体操作</title>
    <style lang="scss" scoped>
        body,
        html {
            margin: 0px;
            padding: 0px;
            overflow: hidden;
            height: 100%;
            border-radius: 350px;
            pointer-events: none;
        }

        #app {
            pointer-events: auto;
            text-align: center;
            margin: 0px;
            padding: 0px;
            height: 100%;
            overflow: hidden;
            box-sizing: border-box;
            background: royalblue;
            border: 1px solid #f5222f;
            display: flex;
            flex-direction: column;
            pointer-events: auto;
        }

        .titleBar {
            height: 38px;
            width: 100%;
            line-height: 36px;
            left: 100px;
            background: red;
            padding-left: 300px;
            padding-right: 300px;
            display: flex;
            border-bottom: 1px sold #f5222f;
        }

        .windowTool {
            border: 1px sold chartreuse;
        }

        div {
            height: 100%;
            width: 38px;
            cursor: pointer;
            display: inline-block;
        }

        i {
            font-size: 12px;
        }

        i:hover {
            background: #ff4d4f;
        }

        .title {
            flex: 1;
            display: flex;
            -webkit-app-region: drag;

        }

        .logo {
            padding-left: 8px;
            padding-right: 6px;

        }

        img {
            width: 30px;
            height: 30px;
            margin-top: 7px;
        }

        .close:hover {
            color: #fff;
            background: #ff4d4f;
        }

        .imgicon {
            width: 30px;
            height: 30px;
            margin-top: 7px;
        }

        .content {
            flex: 1;
            overflow-y: auto;
            overflow-x: auto;
        }
    </style>
    <script>
        let {
            remote
        } = require("electron");

        export default {
            name: "ele_vue",
            data() {
                return {
                    isMaxSize: false
                };
            },
            mounted: function () {
                let win = remote.getCurrentWindow();
                win.on("maximize", () => {
                    this.isMaxSize = true;
                    this.setState();
                });
                win.on("unmaximize", () => {
                    this.isMaxSize = false;
                    this.setState();
                });
                win.on(
                    "move",
                    this.debounce(() => {
                        this.setState();
                    })
                );
                win.on(
                    "resize",
                    this.debounce(() => {
                        this.setState();
                    })
                );
                this.isMaxSize = win.isMaximized();
                this.getState();
                // 点击穿透透明区域
                window.addEventListener("mousemove", (Event) => {
                    let flag = Event.target == document.documentElement;
                    if (flag) {
                        win.setIgnoreMouseEvents(true, {
                            forward: true
                        });
                    } else {
                        win.setIgnoreMouseEvents(false);
                    }
                });
                win.setIgnoreMouseEvents(true, {
                    forward: true
                });
            },
            methods: {
                close() {
                    remote.getCurrentWindow().close();
                },
                minisize() {
                    remote.getCurrentWindow().minimize();
                },
                restore() {
                    remote.getCurrentWindow().restore();
                },
                maxsize() {
                    remote.getCurrentWindow().maximize();
                },
                // 记录窗口状态
                setState() {
                    let win = remote.getCurrentWindow();
                    let rect = win.getBounds();
                    let isMaxSize = win.isMaximized();
                    let obj = {
                        rect,
                        isMaxSize
                    };
                    localStorage.setItem("winState", JSON.stringify(obj));
                },
                // 恢复窗口状态
                getState() {
                    let win = remote.getCurrentWindow();
                    let winState = localStorage.getItem("winState");
                    if (winState) {
                        winState = JSON.parse(winState);
                        if (winState.isMaxSize) win.maximize();
                        win.setBounds(winState.rect);
                    }
                    win.show();
                },
                // 防抖函数
                debounce(fn) {
                    let timeout = null;
                    return function () {
                        clearTimeout(timeout);
                        timeout = setTimeout((_) => {
                            fn.apply(this, arguments);
                        }, 300);
                    };
                },
                // 限流函数
                throttle(fn) {
                    let timeout = null;
                    return function () {
                        if (timeout) return;
                        timeout = setTimeout((_) => {
                            fn.apply(this, arguments);
                            timeout = null;
                        }, 300);
                    };
                },
            },
        };
    </script>
</head>

<body>
    <div id="app">
        <div class="titleBar">
            <div class="title">
                <div class="logo">
                    <img src="./assets/alpha.png" alt="omega.png" srcset="" />
                </div>
                <div class="txt">ELE-VUE</div>
            </div>
            <div class="windowTool">
                <div @click="minisize">
                    <i class="iconfont">
                        <img class="imgicon" src="./assets/down.png" />
                    </i>
                </div>
                <div v-if="isMaxSize" @click="restore">
                    <i class="iconfont">
                        <img class="imgicon" src="./assets/restore.png" />
                    </i>
                </div>
                <div v-else @click="maxsize">
                    <i class="iconfont">
                        <img class="imgicon" src="./assets/rectangle.png" />
                    </i>
                </div>
                <div @click="close" class="close">
                    <i class="iconfont">
                        <img class="imgicon" src="./assets/close.png" />
                    </i>
                </div>
            </div>
        </div>
        <div class="content">
            <router-view />
        </div>
    </div>
</body>

</html>